<template>
  <div class="blog-editor">
    <el-form :model="form" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="form.title" placeholder="请输入文章标题" />
      </el-form-item>
      
      <el-form-item label="分类">
        <el-select v-model="form.category" placeholder="请选择分类">
          <el-option
            v-for="item in categories"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="标签">
        <el-select
          v-model="form.tags"
          multiple
          filterable
          allow-create
          placeholder="请选择或创建标签"
        >
          <el-option
            v-for="item in tags"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="摘要">
        <el-input
          v-model="form.summary"
          type="textarea"
          rows="3"
          placeholder="请输入文章摘要"
        />
      </el-form-item>
      
      <el-form-item label="内容">
        <div class="editor-wrapper">
          <div class="toolbar">
            <el-button-group>
              <el-button @click="insertText('**', '**')">加粗</el-button>
              <el-button @click="insertText('*', '*')">斜体</el-button>
              <el-button @click="insertText('### ')">标题</el-button>
              <el-button @click="insertText('> ')">引用</el-button>
              <el-button @click="insertText('- ')">列表</el-button>
              <el-button @click="insertImage">图片</el-button>
              <el-button @click="insertLink">链接</el-button>
            </el-button-group>
          </div>
          
          <el-input
            v-model="form.content"
            type="textarea"
            :rows="20"
            placeholder="请输入文章内容（支持 Markdown）"
          />
          
          <el-tabs v-model="activeTab" class="preview-tabs">
            <el-tab-pane label="编辑" name="edit" />
            <el-tab-pane label="预览" name="preview">
              <div class="markdown-body" v-html="previewContent" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">发布文章</el-button>
        <el-button @click="handleSaveDraft">保存草稿</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { marked } from 'marked'
import { useBlogStore } from '@/stores/blog'

const blogStore = useBlogStore()

const form = ref({
  title: '',
  category: '',
  tags: [] as string[],
  summary: '',
  content: ''
})

const categories = [
  { label: '技术', value: 'tech' },
  { label: '生活', value: 'life' },
  { label: '随笔', value: 'essay' }
]

const tags = ['Vue', 'React', 'JavaScript', 'TypeScript']
const activeTab = ref('edit')

const previewContent = computed(() => {
  return marked(form.value.content)
})

const insertText = (prefix: string, suffix = '') => {
  const textarea = document.querySelector('.editor-wrapper textarea')
  if (!textarea) return
  
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const text = form.value.content
  
  form.value.content = 
    text.substring(0, start) +
    prefix +
    text.substring(start, end) +
    suffix +
    text.substring(end)
}

const insertImage = () => {
  // TODO: 实现图��上传
  insertText('![图片描述](', ')')
}

const insertLink = () => {
  insertText('[链接文字](', ')')
}

const handleSubmit = async () => {
  try {
    await blogStore.createBlog({
      ...form.value,
      status: 'published'
    })
    ElMessage.success('发布成功')
  } catch (error) {
    ElMessage.error('发布失败')
  }
}

const handleSaveDraft = async () => {
  try {
    await blogStore.createBlog({
      ...form.value,
      status: 'draft'
    })
    ElMessage.success('保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  }
}
</script>

<style lang="scss" scoped>
.blog-editor {
  .editor-wrapper {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    
    .toolbar {
      padding: 10px;
      border-bottom: 1px solid #dcdfe6;
    }
    
    .preview-tabs {
      padding: 20px;
      
      :deep(.el-tabs__content) {
        padding: 20px 0;
      }
    }
  }
}
</style> 